<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超链接美化</title>
	<style type="text/css">
		
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;

		}
		.nav{
			width: 960px;
			/*height: 40px;*/
			overflow: hidden;
			margin: 100px auto ;
			background-color: purple;
			/*设置圆角*/
			border-radius: 5px;
		}
		.nav ul li{
			float: left;
			/*width: 160px;*/
			/*height: 40px;*/
			line-height: 40px;
			text-align: center;
		}
		.nav ul li a{
			/*a是span标签，要转换成块级，才能设置高宽*/
			display: block;
			width: 160px;
			height: 40px;
			color: white;
			font-size: 20px;
			text-decoration: none;
			font-family: 'Hanzipen SC';
			/*text-align: center;*/
			/*line-height: 40px;*/
			/*float: left;*/
		}
		/*a标签除外，不继承父元素的color*/


		.nav ul li a:hover{
			background-color: red;
			font-size: 22px;
		}
	</style>
</head>
<body>
	
	<div class="nav">
		<ul>
			<li>
				<a href="">网站导航</a>
			</li>
			<li>
				<a href="">网站导航</a>
			</li>
			<li>
				<a href="">网站导航</a>
			</li>
			<li>
				<a href="">网站导航</a>
			</li>
			<li>
				<a href="">网站导航</a>
			</li>
			<li>
				<a href="">网站导航</a>
			</li>
		</ul>
	</div>
</body>
</html>